<template>
  <div class="box">
    <el-dialog title="新增还款" :visible.sync="huanKuanShow" :direction="direction" size="55%" :before-close="Close">
      <el-form ref="message" :label-position="labelPosition" :inline="true" :model="message">
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位" label-width="70px">
              <el-input v-model="message.input1" size="mini" disabled></el-input>
            </el-form-item>
            <el-form-item label="部门" label-width="60px">
              <el-input v-model="message.input2" size="mini" disabled></el-input>
            </el-form-item>
            <el-form-item label="姓名" label-width="50px">
              <el-input v-model="message.input3" size="mini" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公司账户" label-width="70px">
              <el-input v-model="message.gszh" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="还款金额" label-width="70px">
              <el-input v-model="message.hkje" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item class="fromItem" label="备注" label-width="70px">
              <el-input v-model="message.desc" class="textarea" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex_evenly">
          <!-- size="small" type="primary" size="small" @click="outborrowing">保存</el-button> -->
          <el-button size="small" type="success" @click="outborrowing">提交</el-button>
          <el-button size="small" type="danger" @click="Close">关闭</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      direction: 'rtl',
      labelPosition: 'right',
      huanKuanShow: true,
      flag: false,
      message: {
        input1: '华电',
        input2: '技术部',
        input3: '张三',
        radio: '是',
        gszh: '42123123124123123',
        hkje: 423,
        desc: '2020年4月15日出差工作还款'
      }
    }
  },
  methods: {
    openaddRepay() {
      this.huanKuanShow = true
    },
    outborrowing() {
      this.huanKuanShow = false
    },
    changeradio(radio) {
      console.log(radio)
      if (radio === '否') {
        this.flag = true
      }
      if (radio === '是') {
        this.flag = false
      }
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' 元'
        } else {
          sums[index] = ''
        }
      })

      return sums
    },
    Close() {
      this.$confirm('你确定要离开吗？')
        .then(_ => {
          this.huanKuanShow = false
        })
        .catch(_ => {})
    },
  }
}
</script>

<style lang="scss" scoped>
.fromItem {
  width: 100%;
  .textarea {
    width: 350%;
  }
}
.el-table {
  margin: 0 auto;
}
</style>
